<template>
	<view class="content">
		<view class="header">
			<navigator url="">
				<text class="cuIcon-back"></text>
			</navigator>
			推广中心
		</view>
		<view class="user_mes">
			<view class="mes_detail">
				<view class="user_photo">
					<view class="photo_img">
						<img src="../../static/image/anime3.jpg" alt="">
					</view>
					<view class="user_info">
						<span>{{user_name}}</span>
						<font>我的邀请码：{{yqcode}}</font>
					</view>
				</view>
				<view class="vip_plan">
					<img :src="vip_grade">
					<span></span>
					<img :src="next_vip_grade">
				</view>
			</view>
		</view>
		<view class="vip_mes">
			<view class="vip_title">
				会员升级计划
			</view>
			<ul>
				<li v-for="(item,index) in vipList" :key="index">
					<view class="vip_pic">
						<img :src="item.vip_pic">
						{{item.vip_name}}
					</view>
					<view class="vip_state">
						<span>{{item.remark}}</span>
						<span>（享受每日看片{{item.see_num}}次，下载次数{{item.dowm_num}}次）</span>
					</view>
				</li>
				<!-- <li>
					<view class="vip_pic">
						<img src="../../static/icon/vip1.png" alt="">
						VIP1
					</view>
					<view class="vip_state">
						<span>注册会员</span>
						<span>（享受每日看片10次，下载次数1次）</span>
					</view>
				</li>
				<li>
					<view class="vip_pic">
						<img src="../../static/icon/vip2.png" alt="">
						VIP2
					</view>
					<view class="vip_state">
						<span>推广2人</span>
						<span>（享受每日看片25次，下载次数5次）</span>
					</view>
				</li>
				<li>
					<view class="vip_pic">
						<img src="../../static/icon/vip2.png" alt="">
						VIP3
					</view>
					<view class="vip_state">
						<span>推广5人</span>
						<span>（享受每日看片50次，下载次数15次）</span>
					</view>
				</li>
				<li>
					<view class="vip_pic">
						<img src="../../static/icon/vip4.png" alt="">
						VIP4
					</view>
					<view class="vip_state">
						<span>推广10人</span>
						<span>（享受每日看片100次，下载次数35次）</span>
					</view>
				</li>
				<li>
					<view class="vip_pic">
						<img src="../../static/icon/vip_max.png" alt="">
						超级VIP
					</view>
					<view class="vip_state">
						<span>推广3人</span>
						<span>（享受每日看片无限次，下载次数100次）</span>
					</view>
				</li> -->
			</ul>
		</view>
		
		<view class="footer">
			<navigator url="/pages/invite/invite">
				<button class="cu-btn">立即推广</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_name:'',
				yqcode:'',
				vip_grade:'',
				next_vip_grade:'',
				vipList:[]
			}
		},
		onLoad() {
			let user_mes = uni.getStorageSync('user_info');
			// console.log(user_mes);
			let user_id = user_mes.user_id;
			uni.request({
				url:'http://221.234.36.126:82/api.php/User/popularize',
				method:'POST',
				data:{
					token: '1CECE2221211DDCB613882C3311EC670',
					user_id:user_id
				},
				success: (res) => {
					console.log(res.data);
					this.user_name = res.data.data.user_name;
					this.yqcode =res.data.data.user_yqcode;
					this.vip_grade = res.data.data.vip_grade;
					this.next_vip_grade = res.data.data.next_vip_grade;
					this.vipList = res.data.data.vip;
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style>
uni-page-body{
	background-color: #f7f7f7;
	min-height: 100%;
}

.content{
	min-height: 100%;
	background-color: #f7f7f7;
}

.header{
	width: 100%;
	padding-top: 38rpx;
	background-color: #00A7FF;
	/* height: 70px; */
	/* box-sizing: content-box; */
	position: relative;
	text-align: center;
	color: #ffffff;
	font-size: 34rpx;
	line-height: 34rpx;
}

.header navigator{
	position: absolute;
	left: 30rpx;
	top: 38rpx;
}

.header navigator text{
	font-size: 34rpx;
}

.user_mes{
	width: 100%;
	height: 200rpx;
	background:linear-gradient(0deg,rgba(3,209,255,1) 0%,rgba(0,167,255,1) 100%);
	position: relative;
}

.mes_detail{
	width: 690rpx;
	height: 245rpx;
	background-color: #FFFFFF;
	position: absolute;
	top: 55rpx;
	left: 30rpx;
	border-radius: 10rpx;
	padding-top: 45rpx;
}

.user_photo{
	width: 100%;
	display: flex;
}

.photo_img{
	width: 102rpx;
	height: 102rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-left: 20rpx;
}

.photo_img img{
	width: 100%;
	height: 100%;
}

.user_info{
	height: 102rpx;
	margin-left: 28rpx;
}

.user_info span{
	display: block;
	font-size: 36rpx;
}

.user_info font{
	display: block;
	font-size: 28rpx;
	color: #999999;
	margin-top: 15rpx;
}

.vip_plan{
	width: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 28rpx;
}

.vip_plan img{
	display: block;
	width: 50rpx;
	height: 40rpx;
}

.vip_plan span{
	display: block;
	width: 475rpx;
	height: 10rpx;
	border-radius: 5rpx;
	background-color: #EEEEEE;
}

.vip_mes{
	width: 690rpx;
	margin: 0 auto;
	margin-top: 130rpx;
	padding-bottom: 200rpx;
}

.vip_title{
	width: 100%;
	height: 70rpx;
	box-sizing: border-box;
	padding-left: 18rpx;
	line-height: 70rpx;
	font-size: 32rpx;
	background-color: #FFE8A9;
	border-radius: 10rpx 10rpx 0 0;
}

.vip_mes ul{
	width: 100%;
}

.vip_mes ul li{
	width: 100%;
	height: 120rpx;
	border-radius: 10rpx;
	background-color: #FFFFFF;
	margin-bottom: 30rpx;
	display: flex;
	box-sizing: border-box;
	padding: 10rpx 20rpx;
	justify-content: space-between;
}

.vip_pic{
	display: flex;
	height: 100rpx;
	width: 170rpx;
	align-items: center;
}

.vip_pic img{
	display: block;
	width: 46rpx;
	height: 36rpx;
	margin-right: 13rpx;
}

.vip_state{
	text-align: right;
}

.vip_state span{
	display: block;
	height: 50rpx;
	line-height: 50rpx;
	font-size: 24rpx;
	width: 100%;
	color: #666666;
}

.vip_mes ul li:first-of-type{
	border-radius: 0 0 10rpx 10rpx;
}

.vip_mes ul li:first-of-type .vip_pic img{
	width: 46rpx;
	height: 46rpx;
}

.footer{
	width: 100%;
	height: 155rpx;
	background-color: #FFFFFF;
	position: fixed;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	padding-top: 32rpx;
}

.footer button{
	display: block;
	width: 690rpx;
	height: 90rpx;
	line-height: 90rpx;
	background-color: #00A7FF;
	margin: 0 auto;
	font-size: 34rpx;
	color: #FFFFFF;
	font-weight: 600;
	border-radius: 45rpx;
}
</style>
